<template>
  <div>
    <h1>Home组件</h1>
    <div>
      <button @click="toGame">游戏</button>
      <button @click="toMusic">音乐</button>
      <button @click="toPlay">娱乐</button>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home",
  methods: {
    toGame() {
      const result = this.$router.push(
        //编程式路由导航重复导航报错解决方案1
        //如果push方法书写了第二个和第三个解决成功和失败的回调函数,则push方法就不会返回promise对象了
        "/home/game",
        () => {},
        () => {}
      );
      console.log(result);
    },
    toMusic() {
      //编程式路由导航重复导航报错解决方案2: 不传递回调函数,则push会返回promise对象,我们可以使用catch处理promise对象的异常
      this.$router
        .push({
          path: "/home/music",
        })
        .catch(() => {});
    },
    toPlay() {
      this.$router.push({
        name: "play",
      });
    },
  },
};
</script>

<style>
</style>